<template>
  <div>
    <van-divider content-position="left">个人信息面板</van-divider>
    <van-empty description="请添加信息卡" v-show="message.length == 0">
    </van-empty>
    <el-carousel height="300px" direction="vertical" :autoplay="true" v-show="message.length != 0">
      <el-carousel-item v-for="item in message" :key="item._id">
        <el-card>
          <el-descriptions
            title="健康卡/个人信息卡"
            direction="vertical"
            :column="2"
          >
            <el-descriptions-item label="姓名">{{
              item.name
            }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{
              item.phone
            }}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{
              item.address
            }}</el-descriptions-item>
            <el-descriptions-item label="年龄">
              <el-tag size="small">{{ item.age }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="身份证ID"
              ><el-tag>{{ item.CHID }}</el-tag></el-descriptions-item
            >
            <el-descriptions-item label="修改信息"
              ><el-button size="mini" type="success" @click="tell(item)"
                >修改</el-button
              >
              <el-button size="mini" type="danger" @click="tellDelete(item._id)"
                >删除</el-button
              >
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: [],
      patientID: window.sessionStorage.getItem('id')
    }
  },
  mounted () {
    this.getMessage()
  },
  methods: {
    async getMessage () {
      const { data: res } = await this.$http.get(
        '/user/msgcard/msgcardlist/' + this.patientID
      )
      if (res.status !== 200) return this.$Toast.fail('获取信息失败')
      console.log(res)
      this.message = res.cardList
    },
    tell (item) {
      this.$emit('edit', item)
    },
    tellDelete (id) {
      this.$emit('delete', id)
    }
  }
}
</script>

<style scoped>
.el-descriptions {
  font-size: 10px;
}
</style>
